<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./style/style.css">
    <link rel="stylesheet" type="text/css" href="./style/style-main.css">
    <link rel="stylesheet" type="text/css" href="./style/style-my.css">
    <link rel="stylesheet" type="text/css" href="./style/style-search.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轻音乐</title>
</head>

<body>
    <!-- 状态提示区域 -->
    <div id="player-status"></div>

    <div class="container">
        <!-- 左侧固定菜单栏 -->
        <div class="sidebar">
            <div class="logo">
                <div class="logo-img">音</div>
                <div class="logo-text">轻音乐</div>
            </div>
            <ul class="menu-items">
                <li class="menu-item active" data-page="home">
                    <img src="./images/tu1.png" alt="首页" class="main-icon">
                    <span>首页</span>
                </li>
                <li class="menu-item" data-page="search">
                    <img src="./images/tu2.png" alt="搜索" class="main-icon">
                    <span>搜索</span>
                </li>
                <li class="menu-item" data-page="settings">
                    <img src="./images/tu3.png" alt="设置" class="main-icon">
                    <span>设置</span>
                </li>
                <li class="menu-item" data-page="profile">
                    <img src="./images/tu4.png" alt="我的" class="main-icon">
                    <span>我的</span>
                </li>
            </ul>
            <div class="sidebar-footer">
                <li class="menu-item" data-page="about">
                    <img src="./images/tu5.png" alt="关于" class="main-icon">
                    <span>关于</span>
                </li>
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="main-content">
            <!-- 顶部固定搜索栏 -->
            <div class="top-bar">
                <div class="search-container">
                    <img src="./images/tu6.png" alt="搜索" class="search-icon">
                    <!-- <input type="text" placeholder="搜索歌曲、艺术家或专辑..."> -->
                    <input type="text" class="search-box" placeholder="搜索歌曲、艺术家或专辑..." id="searchInput">
                    <button class="search-button" id="searchButton">搜索</button>
                </div>
                <div class="profile-avatar-min" id="profileAvatar2">
                    <img src="./images/tu11.png" class="main-icon-min">
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 首页内容 -->
                <div class="page active" id="home">
                    <h2 class="page-title">随机播放</h2>
                    <p>不知道听什么，来看看缘分吧！！！</p>

                    <div class="card-container">
                        <div class="card">
                            <div class="card-header">
                                <h3>猜你喜欢</h3>
                            </div>
                            <div class="card-body">
                                <p>当前项目进展顺利，已完成80%的任务。团队协作效率高，预计按时交付。</p>
                                <div class="stats">
                                    <div class="stat-item">
                                        <div class="stat-value">24</div>
                                        <div class="stat-label">任务总数</div>
                                    </div>
                                    <div class="stat-item">
                                        <div class="stat-value">19</div>
                                        <div class="stat-label">已完成</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h2 class="page-title">每日推荐</h2>
                    <p>这里每日推荐20首歌曲，看看有没有喜欢的吧！！！</p>
                    <div class="card-big">
                        <div class="cards-container" id="cards-container">
                            <div class="loading">
                                <div class="loading-spinner"></div>
                                <p>正在加载音乐数据...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 搜索界面 -->
                <div class="page" id="search">
                    <h2 class="page-title">音乐搜索</h2>
                    <!-- <div id="music-list-page" class="music-list-page">
                <div class="header">
                    <h1>🎵 音乐列表</h1>
                    <div class="random-btn-container">
                        <button id="randomPlayBtn" class="random-btn">
                            <span>🔀</span> 随机播放
                        </button>
                    </div>
                    <input type="text" class="search-box" placeholder="搜索歌曲、艺术家或专辑..." id="searchInput"
                        onkeyup="handleKeyUp(event)">
                </div> -->
                    <table class="music-table">
                        <thead>
                            <tr>
                                <th class="serial-number">序号</th>
                                <th class="title-column">标题</th>
                                <th class="artist-column">艺术家</th>
                                <th class="album-column">专辑</th>
                                <th class="duration-column">时长</th>
                                <th class="action-column">操作</th>
                            </tr>
                        </thead>
                        <tbody id="music-list">
                            <!-- 动态加载音乐数据 -->
                        </tbody>
                    </table>
                </div>

                <!-- 设置页面 -->
                <div class="page" id="settings">
                    <h2 class="page-title">系统设置</h2>
                    <p>管理您的账户偏好和系统配置。</p>

                    <div class="settings-grid">
                        <div class="setting-card">
                            <h3><i class="fas fa-user-cog"></i> 账户设置</h3>
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input type="text" id="username" value="john_doe">
                            </div>
                            <div class="form-group">
                                <label for="email">电子邮箱</label>
                                <input type="email" id="email" value="john.doe@example.com">
                            </div>
                            <div class="form-group">
                                <label for="language">语言偏好</label>
                                <select id="language">
                                    <option>简体中文</option>
                                    <option selected>English</option>
                                    <option>Español</option>
                                    <option>Français</option>
                                </select>
                            </div>
                            <button class="btn">保存更改</button>
                        </div>

                        <div class="setting-card">
                            <h3><i class="fas fa-bell"></i> 通知设置</h3>
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" checked> 电子邮件通知
                                </label>
                            </div>
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" checked> 推送通知
                                </label>
                            </div>
                            <div class="form-group">
                                <label>
                                    <input type="checkbox"> 短信通知
                                </label>
                            </div>
                            <div class="form-group">
                                <label>通知频率</label>
                                <select>
                                    <option>实时</option>
                                    <option selected>每日摘要</option>
                                    <option>每周摘要</option>
                                </select>
                            </div>
                            <button class="btn">更新设置</button>
                        </div>

                        <div class="setting-card">
                            <h3><i class="fas fa-lock"></i> 安全设置</h3>
                            <div class="form-group">
                                <label for="password">更改密码</label>
                                <input type="password" id="password" placeholder="输入新密码">
                            </div>
                            <div class="form-group">
                                <label for="confirm-password">确认密码</label>
                                <input type="password" id="confirm-password" placeholder="再次输入密码">
                            </div>
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" checked> 启用双重验证
                                </label>
                            </div>
                            <button class="btn">更新密码</button>
                        </div>
                    </div>
                </div>

                <!-- 我的页面 -->
                <div class="page" id="profile">
                    <h2 class="page-title">个人资料</h2>

                    <div class="profile-header">
                        <div class="profile-avatar-container">
                            <div class="profile-avatar" id="profileAvatar">
                                <img src="./images/tu11.png" class="main-icon">
                            </div>
                            <input type="file" id="avatarUpload" class="file-input" accept="image/*">
                        </div>

                        <div class="profile-info">
                            <div class="info-item">
                                <div class="nickname-display" id="nicknameDisplay">
                                    <h2 id="nicknameText">昵称</h2>
                                    <img class="main-icon-ex" id="editNickname" src="./images/tu9.png">
                                </div>

                                <div class="nickname-edit" id="nicknameEdit">
                                    <div class="nickname-input">
                                        <input type="text" id="nicknameInput" placeholder="请输入您的昵称">
                                        <div class="nickname-buttons">
                                            <button class="save-btn" id="saveNickname">保存</button>
                                            <button class="cancel-btn" id="cancelEdit">取消</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="nickname-display-min">
                                    <h3>个性签名：</h3>
                                </div>
                                <div class="nickname-display-ming" id="nicknameDisplay2">
                                    <h2 id="nicknameText2">无</h2>
                                    <img class="main-icon-ex-min" id="editNickname2" src="./images/tu9.png">
                                </div>

                                <div class="nickname-edit" id="nicknameEdit2">
                                    <div class="nickname-input">
                                        <input type="text" id="nicknameInput2" placeholder="请输入您的个性签名">
                                        <div class="nickname-buttons">
                                            <button class="save-btn" id="saveNickname2">保存</button>
                                            <button class="cancel-btn" id="cancelEdit2">取消</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-container" style="margin-top: 40px;">
                        <div class="card">
                            <div class="card-header">
                                <h3>专业技能</h3>
                            </div>
                            <div class="card-body">
                                <p><strong>项目管理:</strong> 精通敏捷开发、Scrum方法论</p>
                                <p><strong>技术栈:</strong> JavaScript, Python, SQL</p>
                                <p><strong>设计:</strong> UI/UX设计, 原型设计</p>
                                <p><strong>其他:</strong> 团队协作, 客户沟通, 数据分析</p>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h3>最近活动</h3>
                            </div>
                            <div class="card-body">
                                <p><i class="fas fa-check-circle"></i> 完成了项目X的设计文档</p>
                                <p><i class="fas fa-comment"></i> 回复了客户咨询邮件</p>
                                <p><i class="fas fa-users"></i> 主持了团队周会</p>
                                <p><i class="fas fa-file-alt"></i> 提交了季度报告</p>
                                <p><i class="fas fa-code-branch"></i> 合并了开发分支</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 关于页面 -->
                <div class="page" id="about">
                    <h2 class="page-title">关于我们</h2>
                    <div class="card-main">
                        <div class="image-container">
                            <img class="image-main" src="./images/icon.png">
                        </div>
                        <p>一个很简单的音乐软件--轻音乐</p>
                        <p>软件作者：暄妍</p>
                        <p>联系开发者：2058763315@qq.com</p>
                        <p>qq群：1040256013</p>
                    </div>
                    <h2 class="page-title">用户必读</h2>
                    <p>网站（软件）的作者是暄妍（网名），网站与软件涉及到的所有全部都由开发者个人所制作和运营，本网站以及软件完全免费；</p>
                    <div class="fankui-one">
                        <div class="fankui-two">
                            <h3 class="fankui-three">
                                <img class="main-icon" src="./images/tu7.png"> 开发者的话
                            </h3>
                            <p>1.本网站与软件只是个人的爱好业余项目，如果对你有帮助，那这就是这个网站与软件存在的意义；如果你在找成熟稳定无广的音乐软件，可以考虑其他的优秀软件。</p>
                            <p>2.软件分为android和windows版本，android版本只能在基于安卓系统的手机和模拟器中运行；对于不同设备遇到的不同问题，欢迎大家进行反馈。</p>
                            <p>3.本软件唯一发布渠道--官方网站，历史所有版本在夸克云盘（扫描二维码）；未在各大应用商店发布同名应用，谨防被骗。</p>
                            <p>4.本网站与软件没有客服，也没有微信公众号之类的官方账号，如果有问题请进群或网站右侧联系开发者。</p>
                            <p>5.本网站与软件的音乐文件均由开发者个人上传到服务器，若损害了您的权益，请联系开发者进行删除。</p>
                            <p>6.服务器会不定期进行升级或开发新功能，无法访问，请见谅。</p>
                            <p>7.音乐平台不易，请尊重版权，支持正版。</p>
                        </div>
                    </div>

                    <h2 class="page-title">反馈与建议</h2>
                    <p>您可以在此处反馈问题或求想听的音乐！！！</p>

                    <div class="fankui-one">
                        <div class="fankui-two">
                            <h3 class="fankui-three">
                                <img class="main-icon" src="./images/tu8.png"> 提交反馈
                            </h3>

                            <div class="fankui-seven">
                                <div>
                                    <label class="fankui-four">反馈内容</label>
                                    <textarea class="fankui-six" id="feedbackContent"
                                        placeholder="请详细描述您的反馈或建议..."></textarea>
                                </div>

                                <div>
                                    <label class="fankui-four">联系方式（可选）</label>
                                    <input type="text" id="contactInfo" class="fankui-eight" placeholder="邮箱或手机号">
                                </div>
                            </div>

                            <button class="button-one" id="submitButton">
                                提交反馈
                            </button>

                            <div class="status-message" id="statusMessage">
                                <i class="fas fa-check-circle"></i>
                                <span id="messageText"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 菜单切换功能
        document.addEventListener('DOMContentLoaded', function () {
            const menuItems = document.querySelectorAll('.menu-item');
            const pages = document.querySelectorAll('.page');

            menuItems.forEach(item => {
                item.addEventListener('click', function () {
                    // 移除所有活动状态
                    menuItems.forEach(i => i.classList.remove('active'));
                    pages.forEach(p => p.classList.remove('active'));

                    // 添加当前活动状态
                    this.classList.add('active');
                    const pageId = this.getAttribute('data-page');
                    document.getElementById(pageId).classList.add('active');
                });
            });

            // 搜索框功能
            const searchInput = document.getElementById('searchInput');
            const searchButton = document.getElementById('searchButton');
            searchInput.addEventListener('focus', function () {
                // 切换到搜索页面
                menuItems.forEach(i => i.classList.remove('active'));
                pages.forEach(p => p.classList.remove('active'));

                document.querySelector('.menu-item[data-page="search"]').classList.add('active');
                document.getElementById('search').classList.add('active');
            });
            searchButton.addEventListener('focus', function () {
                // 切换到搜索页面
                menuItems.forEach(i => i.classList.remove('active'));
                pages.forEach(p => p.classList.remove('active'));

                document.querySelector('.menu-item[data-page="search"]').classList.add('active');
                document.getElementById('search').classList.add('active');
            });
            // 搜索按钮点击事件
            searchButton.addEventListener('click', searchMusic);

            // 输入框回车键事件
            searchInput.addEventListener('keypress', function (event) {
                if (event.key === 'Enter') {
                    searchMusic();
                }
            });
        });

        let searchTimeout;
        function handleKeyUp(event) {
            clearTimeout(searchTimeout);
            const query = event.target.value.trim();

            searchTimeout = setTimeout(async () => {
                isSearching = !!query;

                if (isSearching) {
                    try {
                        const response = await fetch(`http://www.xuanyanya.com/api/search?q=${encodeURIComponent(query)}`);
                        const data = await response.json();
                        renderMusic(data);
                    } catch (error) {
                        updatePlayerStatus('搜索失败', true);
                    }
                } else {
                    loadMusic(1);
                }
            }, 300);
        }

        // 执行搜索
        async function searchMusic() {
            const query = searchInput.value.trim();

            if (!query) {
                updatePlayerStatus('请输入搜索关键词', true);
                return;
            }

            try {
                // 在实际应用中，这里应该使用真实的API
                const response = await fetch(`http://www.xuanyanya.com/api/search?q=${encodeURIComponent(query)}`);
                const data = await response.json();
                renderMusic(data);
            } catch (error) {
                updatePlayerStatus('搜索失败: ' + error.message, true);
            }
        }

        BaseUrl = "http://www.xuanyanya.com";

        // 渲染音乐列表
        function renderMusic(data) {
            const tbody = document.getElementById('music-list');
            tbody.innerHTML = data.map((music, index) => `
                <tr>
                    <td class="serial-number">${index + 1}</td>
                    <td>${music.title}</td>
                    <td>${music.artist}</td>
                    <td>${music.album}</td>
                    <td class="duration">${music.duration}</td>
                    <td class="action-column">
                        <button class="action-btn play-btn" onclick="handlePlayButtonClick(this, '${music.url}', '${music.lrcurl}')">
                            <span class="icon">播放</span>
                        </button>
                        <button class="action-btn download-btn" onclick="downloadMusic('${music.url}')">
                            <span class="icon">下载</span>
                        </button>
                    </td>
                </tr>
            `).join('');
        }

        // 按钮点击处理
        async function handlePlayButtonClick(button, url, lrcurl) {
            const row = button.closest('tr');

            if (isRandomPlaying) {
                await stopContinuousRandomPlay();
            }
            // 初始化播放器
            if (!audioPlayer) {
                initAudioPlayer();

            }

            // 同一行点击处理
            if (currentlyPlayingRow === row && isNormalPlaying) {
                return audioPlayer.paused ?
                    resumePlayback(button, url) :
                    pausePlayback(button);
            }
            stopNormalPlay();
            // 新播放处理
            await startNewPlayback(button, url, row, lrcurl);
        }

        // 初始化播放器
        function initAudioPlayer() {
            audioPlayer = new Audio();
            audioPlayer.onended = handlePlaybackEnd;
        }

        // 播放结束处理
        function handlePlaybackEnd() {
            if (currentlyPlayingRow) {
                const btn = currentlyPlayingRow.querySelector('.play-btn');
                resetButtonState(btn);
                currentlyPlayingRow = null;
                updatePlayerStatus('播放结束');
            }
            const lyricsBox = document.getElementById('lyricsBox');
            const content = lyricsBox.querySelector('.lyrics-content');
            const loading = lyricsBox.querySelector('.loading');

            // 重置歌词显示
            content.innerHTML = '';  // 清空歌词内容
            loading.style.display = 'block';  // 重新显示加载提示
            lyricsBox.style.display = 'block';  // 确保容器可见

        }

        // 开始新播放
        async function startNewPlayback(button, url, row, lrcurl) {
            stopCurrentPlayback();

            try {
                audioPlayer.src = BaseUrl + url;
                await audioPlayer.play();
                updatePlaybackState(button, row);
                updatePlayerStatus(`正在播放: ${getFileName(url)}`);
                isNormalPlaying = true;
                loadLyrics(lrcurl); // 新增歌词加载
            } catch (error) {
                handlePlaybackError(error);
            }
        }

        // 恢复播放
        async function resumePlayback(button) {
            try {
                await audioPlayer.play();
                updateButtonState(button, true);
                updatePlayerStatus(`继续播放: ${getFileName(audioPlayer.src)}`);
                isNormalPlaying = true;
            } catch (error) {
                handlePlaybackError(error);
            }
        }

        // 暂停播放
        function pausePlayback(button) {
            audioPlayer.pause();
            updateButtonState(button, false);
            updatePlayerStatus(`已暂停: ${getFileName(audioPlayer.src)}`);
        }

        // 停止当前播放
        function stopCurrentPlayback() {
            if (currentlyPlayingRow) {
                const prevBtn = currentlyPlayingRow.querySelector('.play-btn');
                resetButtonState(prevBtn);
                audioPlayer.pause();
                isNormalPlaying = false;
            }
        }

        // 辅助函数
        function updatePlaybackState(button, row) {
            button.classList.add('playing');
            button.querySelector('.icon').textContent = '❚❚';
            currentlyPlayingRow = row;
        }

        function resetButtonState(button) {
            button.classList.remove('playing');
            button.querySelector('.icon').textContent = '播放';
        }

        function updateButtonState(button, isPlaying) {
            button.classList.toggle('playing', isPlaying);
            button.querySelector('.icon').textContent = isPlaying ? '❚❚' : '播放';
        }

        function getFileName(url) {
            return decodeURIComponent(url.split('/').pop());
        }

        function handlePlaybackError(error) {
            console.error('播放失败:', error);
            updatePlayerStatus(`播放失败: ${error.message}`, true);
        }
        async function loadLyrics(lrcUrl) {
            const lyricsBox = document.getElementById('lyricsBox');
            const loading = lyricsBox.querySelector('.loading');
            const content = lyricsBox.querySelector('.lyrics-content');

            lyricsBox.style.display = 'block';
            loading.style.display = 'block';
            content.innerHTML = '';
            lyricsData = [];
            currentLyricIndex = -1;

            try {
                const response = await fetch(lrcUrl);
                if (!response.ok) throw new Error('暂无歌词');
                const rawText = await response.text();

                // 处理歌词（去除时间标签）
                lyricsData = rawText.split('\n')
                    .map(line => {
                        const match = line.match(/\[(\d{2}):(\d{2}\.\d{2})\](.*)/);
                        if (match) {
                            const minutes = parseInt(match[1]);
                            const seconds = parseFloat(match[2]);
                            return {
                                time: minutes * 60 + seconds,
                                text: match[3].trim()
                            };
                        }
                        return null;
                    })
                    .filter(item => item && item.text);

                // 生成歌词行
                content.innerHTML = lyricsData.map((item, index) =>
                    `<div class="lyric-line" data-time="${item.time}">${item.text}</div>`
                ).join('');

                loading.style.display = 'none';
                audioPlayer.addEventListener('timeupdate', handleLyricUpdate);
            } catch (error) {
                loading.style.display = 'none';
                content.innerHTML = '暂无歌词';
            }
        }
        function handleLyricUpdate() {
            const currentTime = audioPlayer.currentTime + 0.5;
            let activeIndex = -1;
            const lines = document.querySelectorAll('.lyric-line');

            // 第一步：移除所有行的激活状态
            lines.forEach(line => line.classList.remove('active'));

            // 第二步：逆向查找当前应激活的歌词行
            for (let i = lyricsData.length - 1; i >= 0; i--) {
                if (currentTime >= lyricsData[i].time) {
                    activeIndex = i;
                    break;
                }
            }

            // 第三步：设置当前激活行样式
            if (activeIndex > -1) {
                const activeLine = lines[activeIndex];
                activeLine.classList.add('active');

                // 第四步：平滑滚动到可视区域中心
                const container = document.querySelector('.lyrics-container');
                const lineTop = activeLine.offsetTop;
                const containerHeight = container.clientHeight;
                const lineHeight = activeLine.offsetHeight;

                container.scrollTo({
                    top: lineTop - containerHeight / 2 + lineHeight / 2,
                    behavior: 'smooth'
                });
            }

            currentLyricIndex = activeIndex;
        }

        function stopNormalPlay() {
            if (audioPlayer) {
                audioPlayer.pause();
                audioPlayer.currentTime = 0;
            }
            if (currentlyPlayingRow) {
                const btn = currentlyPlayingRow.querySelector('.play-btn');
                resetButtonState(btn);
                currentlyPlayingRow = null;
            }
            isNormalPlaying = false;
        }
        // 下载功能
        function downloadMusic(url) {
            const filename = url.split('/').pop();
            const a = document.createElement('a');
            a.href = BaseUrl + url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            updatePlayerStatus(`开始下载: ${filename}`);
        }

        // 更新播放状态提示
        function updatePlayerStatus(message, isError = false) {
            const statusElement = document.getElementById('player-status');
            statusElement.textContent = message;
            statusElement.className = isError ? 'error show' : 'show';

            // 5秒后自动隐藏
            clearTimeout(statusElement.timeout);
            statusElement.timeout = setTimeout(() => {
                statusElement.className = '';
            }, 5000);
        }

        let currentPage = 1;
        let totalPages = 1;
        let isSearching = false;
        let audioPlayer = null;
        let currentlyPlayingRow = null;
        let randomPlaySession = null;
        let isRandomPlaying = false;
        let randomPlayInterval = null;
        let lyricsData = [];
        let currentLyricIndex = -1;
        let isNormalPlaying = false;

        // 获取播放器元素
        const playPauseBtn = document.getElementById('playPauseBtn');
        const prevTrackBtn = document.getElementById('prevTrackBtn');
        const nextTrackBtn = document.getElementById('nextTrackBtn');
        const progressBar = document.getElementById('progressBar');
        const currentTimeDisplay = document.getElementById('currentTime');
        const totalTimeDisplay = document.getElementById('totalTime');
        const songTitleDisplay = document.getElementById('currentSongTitle');
        const songArtistDisplay = document.getElementById('currentSongArtist');


        const playerControls = document.querySelector('.player-controls');
        const collapseBtn = document.querySelector('.collapse-btn');
        const expandBtn = document.querySelector('.expand-btn');

        // 获取DOM元素
        const feedbackContent = document.getElementById('feedbackContent');
        const contactInfo = document.getElementById('contactInfo');
        const submitButton = document.getElementById('submitButton');
        const statusMessage = document.getElementById('statusMessage');
        const messageText = document.getElementById('messageText');

        // 提交按钮点击事件
        submitButton.addEventListener('click', submitFeedback);

        // 提交反馈函数
        async function submitFeedback() {
            const content = feedbackContent.value.trim();
            const contact = contactInfo.value.trim();

            // 验证反馈内容是否为空
            if (!content) {
                showMessage('反馈内容不能为空', 'error');
                return;
            }

            // 禁用按钮并显示加载状态
            submitButton.disabled = true;
            submitButton.textContent = '提交中...';

            try {
                // 组合反馈内容
                let combinedText = content;
                if (contact) {
                    combinedText = `${content}（联系方式：${contact}）`;
                }

                // 准备要发送的数据
                const formData = new FormData();
                formData.append('text', combinedText);

                // 发送POST请求到API
                const response = await fetch('http://www.xuanyanya.com/api/text', {
                    method: 'POST',
                    body: formData
                });

                // 检查响应状态
                if (response.ok) {
                    const result = await response.text();
                    showMessage('反馈提交成功！感谢您的宝贵意见', 'success');
                    // 清空表单
                    feedbackContent.value = '';
                    contactInfo.value = '';
                } else {
                    throw new Error(`请求失败: ${response.status} ${response.statusText}`);
                }
            } catch (error) {
                console.error('提交反馈时出错:', error);
                showMessage(`提交失败: ${error.message}`, 'error');
            } finally {
                // 恢复按钮状态
                submitButton.disabled = false;
                submitButton.textContent = '提交反馈';
            }
        }

        // 显示状态消息
        function showMessage(text, type) {
            messageText.textContent = text;
            statusMessage.className = 'status-message ' + type;
            statusMessage.style.display = 'block';

            // 5秒后隐藏消息
            setTimeout(() => {
                statusMessage.style.display = 'none';
            }, 5000);
        }

        document.addEventListener('DOMContentLoaded', function () {
            const container = document.getElementById('cards-container');

            // 从API获取音乐数据
            async function fetchMusicData() {
                try {
                    container.innerHTML = `
                        <div class="loading">
                            <div class="loading-spinner"></div>
                            <p>正在加载音乐数据...</p>
                        </div>
                    `;

                    const response = await fetch('https://xuanyanya.com/api/daily');

                    if (!response.ok) {
                        throw new Error(`网络响应错误: ${response.status}`);
                    }

                    const data = await response.json();

                    if (!data || data.length === 0) {
                        throw new Error('未找到音乐数据');
                    }

                    renderMusicCards(data);
                } catch (error) {
                    container.innerHTML = `
                        <div class="error">
                            <p>加载音乐数据失败</p>
                            <p>${error.message}</p>
                            <button class="refresh-btn" onclick="location.reload()">
                                重新加载
                            </button>
                        </div>
                    `;
                }
            }

            // 渲染音乐卡片
            function renderMusicCards(songs) {
                container.innerHTML = '';

                songs.forEach(song => {
                    const card = document.createElement('div');
                    card.className = 'music-card';

                    card.innerHTML = `
                        <div class="card-content-new">
                            <h2 class="card-title">${song.title}</h2>
                            <div class="card-meta">
                                <span class="artist">${song.artist}</span>
                                <span class="duration">${song.duration}</span>
                            </div>
                        </div>
                    `;

                    container.appendChild(card);
                });
            }

            // 初始加载数据
            fetchMusicData();
        });
    </script>
    <script src="./js/javascript-my.js"></script>
    <script src="./js/javascript-search.js"></script>
</body>

</html>